<template lang="">
    <div class ="main">
        <selfChart  :option="option"/>
    </div>
    <div class ="main">
        <selfChart  :option="option1"/>
    </div>
    <div class ="main">
        <selfChart  :option="option2"/>
    </div>
</template>
<script>
import chart from '@/zujian/chart.vue';
export default {
    components:{
        selfChart: chart
    },
    data() {

        const data = [];
        for (let i = 0; i <= 100; i++) {
            let theta = (i / 100) * 360;
            let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
            data.push([r, theta]);
        }
        return {
            option:{
                  xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value',
                        name: 'mm'
                    },
                    tooltip: {
                    formatter: '{b}{a}:{c}mm'
                    },
                    series: [
                        {
                            name: '降雨量',
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
            }
            
        }
    },
    
}
</script>
<style lang="scss" scoped>
    .main{
         width: 500px;
         height: 400px;
    }
    
</style>